<template>
  <div class="wrapper">
    <div class="pay-model">
      <div class="pay-item" v-for="(item, index) in data.details" :key="index">
        <div>
          <div class="label">支付方式</div>
          <div>
            <el-select v-model="item.payType"  class="m-2" placeholder="请选择" size="large" filterable>
              <el-option
                v-for="item in paymentOptions"
                :key="item.id"
                :label="item.name"
                :value="item.id"
              />
            </el-select>
          </div>
        </div>
        <div>
          <div class="label">实付金额</div>
          <div class="priceColor">{{item.moneyShow || '0.00'}}</div>
        </div>
      </div>
    </div>
    <div class="total">
      <div class="label">实付总额</div>
      <div class="priceColor">{{ totalPrice || '0.00' }}</div>
    </div>

    <div class="content">
      
        <el-form
            ref="ruleFormRef"
            :model="ruleForm"
            status-icon
            :rules="rules"
            label-width="120px"
            class="demo-ruleForm"
          >
            <el-form-item label="账单号" label-width="100px">
              <el-col :span="12">
                {{ data.payNum }}
              </el-col>
              
            </el-form-item>
            <el-form-item label="收费时间" prop="createTime" label-width="100px">
              <el-col :span="10">
                <el-date-picker
                  v-model="ruleForm.createTime"
                  type="datetime"
                  placeholder="请选择时间"
                  value-format="YYYY-MM-DD HH:mm:ss"
                />
              </el-col>
              
            </el-form-item>
            <el-form-item label="收费人" prop="createUserId" label-width="100px">
              <el-col :span="10">
                <el-select v-model="ruleForm.createUserId" filterable placeholder="请选择" style="width: 100%">
                    <el-option
                      v-for="item in personList"
                      :key="item.id"
                      :label="item.name"
                      :value="item.id"
                    />
                  </el-select>
              </el-col>
            </el-form-item>
            <!-- <el-form-item label="医生" prop="age" label-width="100px">
              <el-col :span="10">
                <el-select v-model="ruleForm.createName" filterable placeholder="请选择" style="width: 100%">
                    <el-option
                      v-for="item in paymentOptions"
                      :key="item.id"
                      :label="item.name"
                      :value="item.id"
                    />
                  </el-select>
              </el-col>
            </el-form-item>
            <el-form-item label="护士" prop="age" label-width="100px">
              <el-col :span="10">
                <el-select v-model="ruleForm.createName" filterable placeholder="请选择" style="width: 100%">
                    <el-option
                      v-for="item in paymentOptions"
                      :key="item.id"
                      :label="item.name"
                      :value="item.id"
                    />
                  </el-select>
                </el-col>
            </el-form-item>
            <el-form-item label="咨询师" label-width="100px">
              <el-col :span="10">
                <el-select v-model="ruleForm.createName" filterable placeholder="请选择" style="width: 100%">
                    <el-option
                      v-for="item in paymentOptions"
                      :key="item.id"
                      :label="item.name"
                      :value="item.id"
                    />
                  </el-select>
                </el-col>
            </el-form-item>
            <el-form-item label="网电咨询师" label-width="100px">
              <el-col :span="10">
                <el-select v-model="ruleForm.createName" filterable placeholder="请选择" style="width: 100%">
                    <el-option
                      v-for="item in paymentOptions"
                      :key="item.id"
                      :label="item.name"
                      :value="item.id"
                    />
                  </el-select>
                </el-col>
            </el-form-item> -->
            <el-form-item label="备注" label-width="100px">
              <el-col :span="10">
                <el-input
                    v-model="ruleForm.remark"
                    :rows="2"
                    type="textarea"
                    placeholder="请输入"
                  />
              </el-col>
              </el-form-item>
            
          </el-form>
    </div>
  </div>
</template>

<script lang="ts">
import { defineComponent, onMounted, ref, reactive, computed, toRefs, watch } from 'vue'
import { getCustomerTypeApi, getUserListsAPi } from '../../../../api/common'
import { updateOrderPayLogInfoApi } from '../../../../api/order'

import { Option, InterFaceType } from "../../../../types"
import type { FormInstance } from 'element-plus'
import { ElMessage } from 'element-plus'
export default defineComponent({
  name: 'BillDetails',
  props: {
      OrderDetail: {
        type: Object as any
      }
  },
  setup(props, ctx) {
    
    const list = reactive({
      data: props.OrderDetail,
      personList: [] as Option[]
    })

    watch(() => props.OrderDetail, (newV) => {
      list.data = newV
      ruleForm.createTime = list.data.createTime
      ruleForm.createUserId = list.data.createUserId
      ruleForm.remark = list.data.remark 
    })

    const paymentOptions = ref<Option[]>([])
    const getList = async() => {
      let result:any;
      result = await getCustomerTypeApi({})
      paymentOptions.value = result.data
    }

    const totalPrice = computed(() => {
      let result = 0
      list.data && list.data.details.map((i:any) => {
        result += Number(i.moneyShow)
      })

      return result
    })

    const ruleFormRef = ref<FormInstance>()
    const ruleForm = reactive({
      createUserId: list.data.createUserId,
      createTime: list.data.createTime || '',
      remark: list.data.remark || '',

      // pass: '',
      // checkPass: '',
      // age: '',
    })

    const rules = reactive({
      createUserId: [{ required: true, message: '请选择收费人', trigger: 'blur' }],
      // checkPass: [{ required: true, message: '请选择医生', trigger: 'blur' }],
      // age: [{ required: true, message: '请选择护士', trigger: 'blur' }],
      createTime: [{ required: true, message: '时间不能为空', trigger: 'blur' }],
    })

    const getPersonList = async() => {
      let res:any = await getUserListsAPi({})
      console.log(res)
      list.personList = res.data
    }

      const updateOrderInfo = async() => {
      let payList  = [] as any[]
      list.data.details.forEach((i:any) => {
        payList.push({
          id: i.id,
          payType: i.payType
        })
      })
      let params = {
        id: list.data.id,
        createUserId: ruleForm.createUserId,
        payTime: ruleForm.createTime,
        remark: ruleForm.remark,
        payList: payList
      }
      console.log(params)
      if (!ruleFormRef.value) return
          await ruleFormRef.value.validate(async (valid, fields) => {
            if (valid) {
              let res:any = await updateOrderPayLogInfoApi(params)
              console.log(res)
              if(res.code === 0) {
                ElMessage.success('修改成功')
                ctx.emit('refreshList')
                ctx.emit('closeDiolog')
              }
            } else {
              console.log('error submit!', fields)
              ElMessage.error('校验未通过')
            }
      })

      
    }

    onMounted(() => {
      getList()
      getPersonList()
    })

    return {
      paymentOptions,
      ...toRefs(list),
      ruleForm,
      ruleFormRef,
      rules,
      totalPrice,
      updateOrderInfo
    }
  }

  
})
</script>
<style lang='scss' scoped>

.pay-model {
  padding: 20px;
  border-radius: 4px;
  background-color: rgb(244, 244, 244);
  box-sizing: border-box;
  border-bottom: 1px solid #EBEDF0;

  .pay-item {
    display: flex;
    align-items: center;
    background-color: white;
    border-radius: 4px;
    

    & > div {
      display: flex;
      align-items: center;
      padding: 5px 15px;
      .label {
        padding-right: 10px;
        font-weight: bold;
      }

      .priceColor {
        color: #67C23A;
        font-size: 22px
      }
    }
  }

}

.total {
  padding: 20px;
  background-color: rgb(244, 244, 244);
  display: flex;
  align-items: center;
  justify-content: flex-end;

  .label {
    padding-right: 15px;
  }

  .priceColor {
    font-size: 22px;
    color: #67C23A;
  }
}

.content {
  background-color: #f4f4f4;
  margin-top: 20px;
  padding: 20px 0
}
</style>